<template>
  <a-row justify="center" style="margin-top: 20px">
    <a-col :span="6">
      <AvatarCard :usercard="usercard"></AvatarCard>
    </a-col>
    <a-col :span="13" :offset="1">
      <InfoCard  @update_brief="update_brief"></InfoCard>
    </a-col>
    <a-col :span="24"> <br /> </a-col>
    <a-col :span="13" :offset="7">
      <SecurityCard></SecurityCard>
    </a-col>
  </a-row>
</template>

<script>
import AvatarCard from '@/components/user/info/AvatarCard';
import InfoCard from '@/components/user/info/InfoCard';
import SecurityCard from '@/components/user/info/SecurityCard';
import { useStore } from 'vuex';
import { reactive } from '@vue/reactivity';
export default {
  name: "UserInfoView",
  components: {
    AvatarCard,
    InfoCard,
    SecurityCard,
  },
  setup(){
    const store = useStore();
    let userinfo = reactive(store.state.user.info);

    let usercard = reactive({
        avatar: userinfo.avatar,
        brief: userinfo.brief,
    })

    const update_brief = (brief) => {
      userinfo.brief = brief
      usercard.brief = brief
    };

    return {
        usercard,
        update_brief,
    }
  }
};
</script>

<style scoped>
</style>